<template>
  <div class="app-container pull-height">
    <div>
      <el-row
        style="background-color: white;position: relative;top: 10px; padding: 5px;"
      >
        <el-col :span="9" :offset="14" class="radio-container">
          <el-input
            placeholder="请输入关键字（文件名/账户）"
            size="medium"
            v-model="input"
            clearable
            style="width: 250px; position: relative;top: 4px;left: 10px;"
          >
          </el-input>
          <el-button
            type="primary"
            size="medium"
            style="position: relative;top: 4px;left: 10px;"
            @click="searchAll()"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1">
          <i
            class="el-icon-refresh"
            style="font-size: 1.3em;position: relative;right: 65px;top: 10px;"
            @click="clearItem()"
          ></i>
        </el-col>
      </el-row>
      <!--                       ********表格**********                -->
      <el-row style="background-color: white;position: relative;top: 10px;">
        <el-col :span="22" :offset="1">
          <el-table :data="tableData">
            <!-- ----------------------表格中的数据 -->
            <el-table-column
              prop="id"
              label="导出编号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="account"
              label="操作账户"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="exportTime"
              label="导出时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="tableName"
              label="表名"
              align="center"
            ></el-table-column>
          </el-table>
        </el-col>
        <!-- --------------------------------------------分页 -->
        <el-col :span="18" :offset="3">
          <el-row>
            <template>
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[8, 16, 24, 32]"
                  :page-size="pageSize"
                  layout="prev, pager, next, jumper, sizes, total"
                  :total="tableTotal"
                >
                </el-pagination>
              </div>
            </template>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //搜索功能的输入关键字
      input: "",
      //表格名
      tableData: [],
      //分页
      currentPage: 1, // 当前页码
      pageSize: 8, // 每页显示条数
      tableTotal: 0, //总条数
      //用于记录页码改变是因为哪一个方法
      changePage: true,
      //记录分页的第二页之后应该请求的方法
      pageState: 0
    };
  },
  methods: {
    //刷新功能
    clearItem: function() {
      this.input = "";
      this.getTableData();
      this.pageState = 0;
    },
    // 获取表格数据的方法，这里假设通过异步请求从服务器获取数据
    getTableData() {
      this.$axios
        .get("/export/findall/" + this.currentPage + "/" + this.pageSize)
        .then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data.records;
          this.tableTotal = res.data.data.total;
        });
    },
    handleSizeChange(val) {
      // 页面大小修改时触发
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 页码修改时触发
      console.log(`当前页: ${val}`);
      // 给当前页属性赋值
      this.currentPage = val;
      var num = this.pageState;
      if (num == 0) {
        this.getTableData();
      } else if (num == 3) {
        this.searchAll();
      }
    },
    //多条件查询
    searchAll: function() {
      this.pageState = 3;
      this.$axios
        .get(
          "/export/searchAll/"+
            this.input +
            "/" +
            this.currentPage +
            "/" +
            this.pageSize
        )
        .then(res => {
          this.tableData = res.data.data.records;
          this.tableTotal = res.data.data.total;
          this.input = "";
        });
    },

   
  },
  mounted: function() {
    this.getTableData();
    this.$axios
      .get("/user/findUserByAccount/" + window.localStorage.getItem("account"))
      .then(res => {
        console.log(res.data.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
      });
    this.findManager();
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
  background-color: #ddf1da;
}

.demo-table-expand label {
  width: 90px;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
